<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 工具栏 -->
      <!-- page-tool -->
      <!-- 自己封裝的高級插槽 -->
      <!-- :show-before="true" 控制左上角的提示显示 -->
      <PageTools :show-before="true">
        <!-- v-slot:before 内容显示，并且控制位置 -->
        <!-- 具名插槽slot：定义两个组件的位置 -->
        <template #before>有0条考勤审批尚未处理</template>
        <template #after>
          <!-- 设置样式 -->
          <el-button size="mini" type="primary">导入</el-button>
          <el-button size="mini" type="primary">提醒</el-button>
          <el-button size="mini" type="primary">设置</el-button>
          <el-button size="mini" type="primary">历史归档</el-button>
          <el-button size="mini" type="primary">4月份归档</el-button>
        </template>
      </PageTools>
      <!-- el-form:Form表单 -->
      <!-- 一个表单包裹两个表单 -->
      <!-- 卡片-表单-复选框 -->
      <el-card class="First-card">
        <el-form ref="formData" :model="formData" label-width="120px" class="formInfo">
          <el-form-item label="部门:">
            <el-checkbox-group v-model="formData.deptID">
              <el-checkbox
                v-for="item in departments"
                :key="item.id"
                :label="item.name"
              >
                {{ item.name }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="考勤状态：">
            <el-radio-group v-model="formData.stateID">
              <el-radio
                v-for="item in stateData.holidayType"
                :key="item.id"
                :label="item.value"
                :value="item.value"
              >
                {{ item.value }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="Second-card" />
    </div>
  </div>
</template>

<script>
// departmentList 获取部门列表接口
import { getAttendancesMock, departmentList } from '@/api/attendances'
// 枚举数据实现考勤状态渲染
//
import attendanceApi from '@/api/constant/attendance'
export default {
  data() {
    return {
      departments: [],
      formData: {
        deptID: [], // 性别
        stateID: ''
      },
      stateData: attendanceApi
    }
  },
  created() {
    this.getAttendancesMock()
    this.departmentList()
  },
  methods: {
    //   拿到部门数据
    async departmentList() {
      const { depts } = await departmentList()
      this.departments = depts
      console.log(depts)
    },
    async getAttendancesMock() {
      const res = await getAttendancesMock()
      console.log(res)
    }
  }
}
</script>
<style>

</style>
